<template>
  <div id="container">
    <div>
      <mt-header fixed title="附近加油站">
        <div class="imgs" slot="left">
          <router-link to="/">
            <mt-button icon="back"></mt-button>
          </router-link>
          &nbsp;
          <router-link to="/">
            <img src="../assets/zhuye_0.png" alt="" style="width: 30px" />
          </router-link>
        </div>
      </mt-header>
    </div>
    <div id="map"></div>
    <div id="myPageTop">
      <input placeholder="请输入关键字" id="tipinput" />
    </div>
  </div>
</template>

<script>
export default {
  // data() {
  //   return {
  //     province: this.province,
  //   };
  // },

  mounted() {
    this.getMap();
  },
  // 加载当前位置坐标
  methods: {
    getMap(res) {
      AMap.plugin("AMap.Geolocation", function () {
        // AMap.Geolocation   插件加载完毕后，执行该回调函数
        let geoloc = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 5000,
        });

        geoloc.getCurrentPosition(function (status, result) {
          console.log(status, result);
          // if (status == "complete") {
          //   onComplete(result);
          // } else {
          //   onError(result);
          // }
          let lat = result.position.lat;
          let lng = result.position.lng;
          showMap(lat, lng);
        });
      });

      // 通过经纬度显示地图
      function showMap(lat, lng) {
        var map = new AMap.Map("map", {
          zoom: 11, //级别
          center: [lng, lat], //中心点坐标
          viewMode: "3D", //使用3D视图
          resizeEnable: true,
        });

        // 添加图层，  实时路况图层
        var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 10,
        });
        map.add(trafficLayer); //添加图层到地图

        // 添加覆盖物
        var marker = new AMap.Marker({
          position: [lng, lat], //位置
        });
        map.add(marker); //添加到地图

        // 为marker绑定事件
        var infoWindow = new AMap.InfoWindow({
          //创建信息窗体
          isCustom: false, //使用自定义窗体
          content: "<div style='background:#f00;'>信息窗体</div>", //信息窗体的内容可以是任意html片段
          offset: new AMap.Pixel(16, -45),
        });
        var onMarkerClick = function (e) {
          infoWindow.open(map, e.target.getPosition()); //打开信息窗体
          //e.target就是被点击的Marker
        };
        marker.on("click", onMarkerClick); //绑定click事件
        //输入提示
        var autoOptions = {
          input: "tipinput",
        };
        // *********************************************
        // 同时引入工具条插件，比例尺插件和鹰眼插件
        AMap.plugin(
          [
            "AMap.ToolBar",
            "AMap.Scale",
            "AMap.HawkEye",
            "AMap.MapType",
            "AMap.Geolocation",
          ],
          function () {
            // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
            map.addControl(
              new AMap.ToolBar({
                position: "LT",
              })
            );

            // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
            map.addControl(
              new AMap.Scale({
                position: "LB",
              })
            );

            // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
            map.addControl(
              new AMap.HawkEye({
                isOpen: true,
                position: "RB",
              })
            );

            // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
            map.addControl(
              new AMap.MapType({
                position: "RT",
              })
            );

            // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
            map.addControl(new AMap.Geolocation());
          }
        );

        AMap.plugin("AMap.AutoComplete", function () {
          var autoOptions = {
            //city 限定城市，默认全国
            city: "合肥",
          };
          // 实例化AutoComplete
          var autoComplete = new AMap.AutoComplete(autoOptions);
          // 根据关键字进行搜索
          autoComplete.search("加油站", function (status, result) {
            // 搜索成功时，result即是对应的匹配数据
            console.log(result);
          });
        });
        AMap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], function () {
          var auto = new AMap.AutoComplete(autoOptions);
          var placeSearch = new AMap.PlaceSearch({
            map: map,
          }); //构造地点查询类
          auto.on("select", select); //注册监听，当选中某条记录时会触发
          function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name); //关键字查询查询
          }
        });
        // 逆地理编码  获取省  并截取掉省字
        AMap.plugin("AMap.Geocoder", function () {
          let geocoder = new AMap.Geocoder();
          geocoder.getAddress([lng, lat], function (status, result) {
            // console.log(status, result);
            // console.log(status);
            // console.log(result);
            // console.log(result.regeocode.formattedAddress);
            // console.log(result.regeocode.addressComponent.province);
            let shen = result.regeocode.addressComponent.province;
            console.log(shen);
          });
        }); //  逆地理编码结束
      } //
    }, // getMap()  结束
  }, // method结束
};
</script>
<style lang="scss" scoped>
.mint-header .mint-button {
  color: #fff;
}
.mint-header {
  height: 70px;
  background-color: #db261d;
  font-size: 1.4em;
}
#map {
  top: 70px;
  bottom: 0;
  width: 100vw;
  height: 92vh;
  position: fixed;
  position: relative;
}
#myPageTop {
  position: absolute;
  z-index: 3;
  top: 85px;
  left: 52px;
}
#tipinput {
  padding: 8px 5px;
  margin: 2px 0;
}
</style>
